<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历</title>
    <link rel="stylesheet" href="css/index.css">
    <!--<script type="text/javascript" src="../demoUtils.js"></script>-->
    <style>
        #scroller ul li{
            overflow: hidden;     
        }    
		.swiper-wrapper .swiper-slide:nth-of-type(1){
			background: lawngreen;
		}
		 .swiper-wrapper .swiper-slide:nth-of-type(2){
			background: paleturquoise;
		}
		.swiper-wrapper .swiper-slide:nth-of-type(3){
			background: turquoise;
		}   
		.swiper-slide img{
			width: 100%;
			height: 100%;
		}               
    </style>
</head>
<body>
    <!--进入页面loading加载中div-->
    <div id="loading">loading</div>
    <!--进入页面的动画开始-->
	<!--<div id="wrapper">-->
    <div class="swiper-container">
        <div class="swiper-wrapper ">             
                                    <!--注意：这块class="ani" swiper-animate-effect="flipInX" 是加在图片上 -->
            <div class="swiper-slide"><img class="ani" swiper-animate-effect="rotateInUpRight" src="./images/111.jpg"/></div>
            <div class="swiper-slide"><img class="ani" swiper-animate-effect="rotateInUpLeft" src="./images/222.jpg"/></div>
            <div class="swiper-slide"><img class="ani" swiper-animate-effect="lightSpeedIn" src="./images/333.jpg"/>
                <button id="enter" class="ani" swiper-animate-effect="lightSpeedIn">进入体验</button>
            </div>            
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>   
    </div>
	<!--</div>-->
    <!--进入页面的动画结束-->
    <div id="mainContainer">
        <!--头部部分-->
         <div id="header" style="background: black">
            <div id="btn1">相册</div>
            <div>个人简历</div>
            <div id="btn2">二维码</div>	
         </div>
        <!--中间main部分-->         
         <div id="wrapper">
            <div id="scroller">
                <ul></ul>
            </div>
         </div>
         <!--footer部分-->
        <div id="footer">
            <ul>
                <li id="skill">技能<i class="iconfont icon-jineng-copy" style="color:#ccc;"></i></li>
                <li id="project">项目<i class="iconfont icon-xiangmu" style="color:#ccc;"></i></li>
                <li id="work">经历<i class="iconfont icon-jiaoyujingli" style="color:#ccc;"></i></li>
                <li id="wode">我的<i class="iconfont icon-wode" style="color:#ccc;"></i></li>
            </ul>
        </div>
    </div>

    <script src="js/index.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   	<script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true
        });
        
        
        
		$.ajax({
		type:'post',
		url:'http://www.caffy.online/weixinphp1/getsign.php',
		data:{
			url:window.location.href  //此为地址栏地址
		},
		dataType:'json'
		}).done(function(res){
			  wx.config({
			    debug: true,
			    appId:res.appId,
			    timestamp:res.timestamp,
			    nonceStr:res.nonceStr,
			    signature:res.signature,
			    jsApiList: [
			      // 所有要调用的 API 都要加到这个列表中
			      'scanQRCode',
			      'chooseImage'
			    ]
			  });
	});
			
			
			
        // 以下部分为原生jsonclick实现的，没有引用zepto和zepto下面的touch模块，所以没有tap事件函数
    var oBtn1=document.getElementById('btn1');
    var oBtn2=document.getElementById('btn2');
    oBtn1.onclick=function(){
      wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
              var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          }
      });
    };
    oBtn2.onclick=function(){
	      wx.scanQRCode({
	      needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
	      scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
	      success: function (res) {
	      	var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
	  	  }
   		});
    };		
    </script>
</body>
</html>